<template>
  <div class="wrapper">
    <div class="carthead">
      <img @click="go()" src="../../assets/img/duanhuo/shouye/back.png" alt="">
      <span>购物车</span>
      <span>编辑</span>
    </div>
    <div class="datu">
      <img class="img1" src="../../assets/img/cart/shopingimg.png" alt="">
      <img class="img2" src="../../assets/img/cart/sharesend.png" alt="">
      <img class="img3" src="../../assets/img/cart/goshare.png" alt="">
    </div>
    <div class="gouwu">
      <ul>
        <li class="dizhi">
          <img src="../../assets/img/cart/duihao.png" alt="">
          <img src="../../assets/img/cart/plane.png" alt="">
          <span>日本直邮</span>
        </li>
        <li v-for="mifen in 2" class="mifen">
          <div class="mifen-tu">
            <img src="../../assets/img/cart/duihao.png" alt="">
            <img class="hezi" src="../../assets/img/cart/mifen.png" alt="">
          </div>
          <div class="mifen-txt" >
            <p>会呼吸丝滑蜜粉</p>
            <p>规格:蜜粉</p>
            <div class="txt2">
              <p>￥166.06</p>
              <div>
                <span class="yuan">-</span>
                <span>1</span>
                <span class="yuan">+</span>
              </div>
            </div>
          </div>
        </li>
        <li class="ys jine">
          <span>商品金额</span>
          <span>￥332.12</span>
        </li>
        <li class="ys sui">
          <span>综合税总额</span>
          <span>￥0.33</span>
        </li>
        <li class="ys zhong">
          <span>应付总金额</span>
          <span>￥166.39</span>
        </li>
        <li class="jiesuan">
          <p @click="gojiesuan" >结算<span>(2)</span></p>
        </li>
      </ul>
    </div>
    <div class="gouwu2 gouwu">
      <ul>
        <li class="dizhi">
          <img src="../../assets/img/cart/duihao.png" alt="">
          <img src="../../assets/img/cart/plane.png" alt="">
          <span>日本直邮</span>
        </li>
        <li v-for="mifen in 2" class="mifen">
          <div class="mifen-tu">
            <img src="../../assets/img/cart/duihao.png" alt="">
            <img class="hezi" src="../../assets/img/cart/mifen.png" alt="">
          </div>
          <div class="mifen-txt" >
            <p>会呼吸丝滑蜜粉</p>
            <p>规格:蜜粉</p>
            <div class="txt2">
              <p>￥166.06</p>
              <div>
                <span class="yuan">-</span>
                <span>1</span>
                <span class="yuan">+</span>
              </div>
            </div>
          </div>
        </li>
        <li class="ys jine">
          <span>商品金额</span>
          <span>￥332.12</span>
        </li>
        <li class="ys sui">
          <span>综合税总额</span>
          <span>￥0.33</span>
        </li>
        <li class="ys zhong">
          <span>应付总金额</span>
          <span>￥166.39</span>
        </li>
        <li class="jiesuan">
          <p @click="gojiesuan">结算<span>(2)</span></p>
        </li>
      </ul>
    </div>
    <div  class="shixiao">
      <ul>
        <li class="dizhi">
          <img src="../../assets/img/cart/shixiao.png" alt="">
          <span>失效商品</span>
        </li>
        <li class="mifen">
          <div class="mifen-tu">
            <img src="../../assets/img/cart/duihao.png" alt="">
            <img class="hezi" src="../../assets/img/cart/mifen.png" alt="">
          </div>
          <div class="mifen-txt" >
            <p>会呼吸丝滑蜜粉</p>
            <p>规格:蜜粉</p>
            <div class="txt2">
              <p>￥166.06</p>
              <div>
                <span class="yuan">-</span>
                <span>1</span>
                <span class="yuan">+</span>
              </div>
            </div>
          </div>
        </li>
        <li v-show="qingchu" class="qingchu">
          <span @click="goqingchu">清除失效商品</span>
        </li>
      </ul>
    </div>
    <div class="lick">
      <ul>
        <li class="cai">
          <span>--猜你喜欢--</span>
        </li>
        <li v-for="xihuan in 2" class="licktu">
          <ul class="licktutu">
            <li @click="gofenlei"  >
              <div>
                <img src="../../assets/img/duanhuo/shouye/listImg1.png" alt="">
              </div>
              <p>不易脱妆口红</p>
              <span>￥59</span>
            </li>
            <li @click="gofenlei">
              <div>
                <img src="../../assets/img/duanhuo/shouye/listImg3.png" alt="">
              </div>
              <p>不易脱妆口红</p>
              <span>￥59</span>
            </li>
            <li @click="gofenlei">
              <div>
                <img src="../../assets/img/duanhuo/shouye/listImg2.png" alt="">
              </div>
              <p>不易脱妆口红</p>
              <span>￥59</span>
            </li>
            <li @click="gofenlei">
              <div>
                <img src="../../assets/img/duanhuo/shouye/listImg3.png" alt="">
              </div>
              <p>不易脱妆口红</p>
              <span>￥59</span>
            </li>
          </ul>
        </li>
        <li class="jiazai">
          <span>加载更多</span>
        </li>
        <li class="wan">
          <span>(注:商品加载完毕显示 "亲,已经到底了哦")</span>
        </li>
      </ul>
    </div>
    <router-view></router-view>
    <cartFooter></cartFooter>
  </div>
</template>
<script>
  import cartFooter from '../HyyFooter/footer.vue'
  export default {
    data(){
      return{
        qingchu:true,
      }
    },
    methods:{
      go(){
        this.$router.go(-1)
      },
      gojiesuan(){
        this.$router.push({path:'/jiesuan'})
      },
      goqingchu(){
        this.qingchu=false
      },
      gofenlei(){
        this.$router.push({path:'/FenLei'})
      }
    },
    components:{
      cartFooter
    }
  }
</script>
<style scoped>
  .wrapper{
    background: #f2f2f2;
  }
  .carthead{
    background: #e53e42;
    height: 2rem;
    /*line-height: 4rem;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 0 0.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .carthead img{
    height: 1rem;
  }
  .datu .img1{
    width: 100%;
    margin-top: 2rem;
  }
  .datu .img2{
    width: 25%;
    position: absolute;
    top: 3rem;
    right: 1rem;
  }
  .datu .img3{
    width: 20%;
    position: absolute;
    top: 3.8rem;
    right: 1.5rem;
  }
  .gouwu{
    background: #fff;
    position: absolute;
    top: 6rem;
    left: 0;
    right: 0;
  }
  .gouwu ul li, .shixiao ul li{
    padding:0.2rem 0.3rem;
    border-top: 1px solid #ccc;
  }
  .dizhi img{
    width: 0.8rem;
  }
  .dizhi span{
    font-size: 0.8rem;
  }
  .mifen{
    display: flex;
    justify-content: space-between;
  }
  .mifen .mifen-tu{
    display: flex;
    align-items: center;
    width: 30%;
  }
  .mifen .mifen-tu img:first-child{
    width: 0.8rem;
  }
  .mifen .mifen-tu .hezi{
    height: 2rem;
    margin-left: 0.6rem;
  }
  .mifen .mifen-txt{
    width: 70%;
  }
  .mifen .mifen-txt p{
    font-size: 0.6rem;
  }
  .mifen .mifen-txt .txt2{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mifen .mifen-txt .txt2 p{
    display: inline-block;
    color: red;
  }
  .mifen .mifen-txt .txt2 div{
    width: 4rem;
    text-align: center;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 1rem;
  }
  .mifen .mifen-txt .txt2 div .yuan {
    width: 2rem;
    font-size: 1rem;
    padding: 0rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 50%;
  }
  .gouwu .ys{
    font-size: 0.5rem;
    display: flex;
    justify-content: space-between;
  }
  .gouwu .ys span:first-child{
    margin: 0.2rem 0.5rem;
  }
  .gouwu .ys span:last-child{
    color: red;
  }
  .gouwu .jiesuan{
    display: flex;
    justify-content: flex-end;
    font-size: 0.8rem;
    border-bottom: 0.5rem solid #f2f2f2;
  }
  .gouwu .jiesuan p{
    background: #e53e42;
    color: #fff;
    border-radius: 1rem;
    padding: 0 0.5rem;
  }
  .gouwu2{
    margin-top: 15.5rem;
  }
  .shixiao{
    margin-top: 27.6rem;
    background: #fff;
  }
  .qingchu{
    font-size: 0.6rem;
    text-align: center;
    padding: 0.5rem;
  }
  .qingchu span{
    border: 1px solid #ccc;
    padding: 0.1rem 0.5rem;
    border-radius: 1rem;
  }
  .lick{
    background: #fff;
  }
  .lick ul li{
    padding: 0.3rem;
  }
  .lick .cai{
    border-top: 0.5rem solid #f2f2f2;
    font-size: 0.5rem;
    text-align: center;
    padding: 0.5rem;
  }
  .lick .licktu{
    /*width: 24%;*/
    text-align: center;
    font-size: 0.5rem;
  }
  .lick .licktu div{
    border-right: 1px solid #ccc;
    text-align: center;
  }
  .lick .licktu div img{
    height: 3rem;
  }
  .lick .licktu span{
    color: #e53e42;
  }
  .lick .licktu li:last-child div{
    border: none;
  }
  .lick .licktu .licktutu{
    display: flex;
    justify-content: space-around;
  }
  .jiazai{
    font-size: 0.3rem;
    text-align: center;
  }
  .wan{
    font-size: 0.5rem;
    text-align: center;
    color: #e53e42;
  }
</style>
